<script setup>
import section1 from './section1.vue'
import section2 from './section2.vue'
import section3 from './section3.vue'
import section4 from './section4.vue'
import section5 from './section5.vue'

// 获取container
const containerRef = ref(null)
const lis = ref([])
const sectionNums = ref(5)
// 索引号
let curIndex = ref(0)
// 是否滚动
let rolls = false

function roll(index) {
  curIndex.value = index
  rolls = true
  // 滚动页面
  containerRef.value.style.top = -index * 100 + '%'
  // 添加延迟
  setTimeout(function () {
    // 滚动取消
    rolls = false
  }, 300)
}

// 鼠标滚动事件
const mouseRoll = (e) => {
  // 判断是否在滚动
  if (!rolls) {
    // 判断鼠标滚动
    if (e.wheelDelta > 0) {
      if (--curIndex.value < 0) {
        curIndex.value = 0
      }
    } else {
      if (++curIndex.value > lis.value.length - 1) {
        curIndex.value = lis.value.length - 1
      }
    }
    // 滚动页面
    roll(curIndex.value)
  }
}
onMounted(() => {
  lis.value = document.querySelectorAll('.controls li')
  // 添加滚动事件
  document.addEventListener('mousewheel', mouseRoll)
  roll(0)
})

onBeforeUnmount(() => {
  // 移除滚动事件
  document.removeEventListener('mousewheel', mouseRoll)
})
</script>

<template>
  <div class="main">
    <div class="container" ref="containerRef">
      <div class="section">
        <section1></section1>
      </div>
      <div class="section">
        <section2></section2>
      </div>
      <div class="section">
        <section3></section3>
      </div>
      <div class="section">
        <section4></section4>
      </div>
      <div class="section">
        <section5></section5>
      </div>
    </div>
    <div class="controls">
      <ul>
        <li v-for="value in sectionNums" :key="value" @click="roll(value - 1)"
          :class="{ active: value - 1 === curIndex }">
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  .container {
    width: 100%;
    position: absolute;
    transition: all 0.3s ease-in-out;

    .section {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;

      &:nth-child(1) {
        background: url('../../assets/layout/section1_back.png') no-repeat;
        background-size: cover;
      }

      &:nth-child(2) {
        background-color: #e75959;
        background: url('../../assets/layout/skill.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat
      }

      &:nth-child(3) {
        background-color: rgb(227, 209, 104);
      }

      &:nth-child(4) {
        background: url('../../assets//layout/section4_back.webp') no-repeat;
        background-size: cover;
      }

      &:nth-child(5) {
        background-color: skyblue;
      }
    }
  }

  .controls {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%)
  }

  .controls li {
    width: 12px;
    height: 36px;
    border: 1px solid #000;
    cursor: pointer;
    transition: all .3s;

    &:first-child {
      border-radius: 6px 6px 0 0;
    }

    &:last-child {
      border-radius: 0 0 6px 6px;
    }

    &:not(:last-child) {
      border-bottom: none;
    }
  }

  .controls li:hover {
    background-color: rgba(64, 158, 255, .3);
  }

  .controls li.active {
    background-color: var(--el-color-primary);
  }
}
</style>